/* eslint-disable react/prop-types */
import { Link } from 'react-router-dom';

import { useRef } from 'react';
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import { Button, Tag, Space, Menu, Dropdown } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import axios from '@/utils/axios';
import Detail from './detail';

export default () => {
  type GithubIssueItem = {
    url: string;
    id: number;
    number: number;
    title: string;
    labels: {
      name: string;
      color: string;
    }[];
    state: string;
    comments: number;
    created_at: string;
    updated_at: string;
    closed_at?: string;
  };

  const columns: ProColumns<GithubIssueItem>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '标题',
      dataIndex: 'title',
      copyable: true,
      ellipsis: true,
      tip: '标题过长会自动收缩',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '状态',
      dataIndex: 'state',
      filters: true,
      onFilter: true,
      valueType: 'select',
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        open: { text: '未解决', status: 'Error' },
        closed: { text: '已解决', status: 'Success', disabled: true },
        processing: { text: '解决中', status: 'Processing' },
      },
    },
    {
      title: '标签',
      dataIndex: 'labels',
      search: false,
      renderFormItem: (_, { defaultRender }) => {
        return defaultRender(_);
      },
      render: (_, record) => (
        <Space>
          {record.labels.map(({ name, color }) => (
            <Tag color={color} key={name}>
              {name}
            </Tag>
          ))}
        </Space>
      ),
    },
    {
      title: '创建时间',
      key: 'showTime',
      dataIndex: 'created_at',
      valueType: 'dateTime',
      sorter: true,
      search: false,
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        <Link to={`/car/sale/detail?type=edit&id=${record.id}`} key='edit'>
          编辑
        </Link>,
        <Link to={`/car/sale/detail?type=show&id=${record.id}`} key='show'>
          查看
        </Link>,
        <TableDropdown
          key='actionGroup'
          onSelect={() => action?.reload()}
          menus={[
            { key: 'copy', name: '复制' },
            { key: 'delete', name: '删除' },
          ]}
        />,
      ],
    },
  ];

  const menu = (
    <Menu>
      <Menu.Item key='1'>1st item</Menu.Item>
      <Menu.Item key='2'>2nd item</Menu.Item>
      <Menu.Item key='3'>3rd item</Menu.Item>
    </Menu>
  );
  const actionRef = useRef<ActionType>();
  return (
    <ProTable<GithubIssueItem>
      columns={columns}
      actionRef={actionRef}
      request={async (params = {}, sort, filter) => {
        console.log('查询', params, sort, filter);
        return axios.request<GithubIssueItem[]>({ url: 'https://proapi.azurewebsites.net/github/issues', params });
      }}
      editable={{
        type: 'multiple',
      }}
      columnsState={{
        persistenceKey: 'pro-table-singe-demos',
        persistenceType: 'localStorage',
      }}
      rowKey='id'
      rowSelection={{}}
      tableAlertRender={({ selectedRowKeys, selectedRows }) =>
        `当前共选中 ${selectedRowKeys.length} 项，共有 ${selectedRows?.reduce((pre, item) => {
          if (item.state === 'open') {
            return pre + 1;
          }
          console.log(selectedRowKeys, selectedRows);
          return pre;
        }, 0)} 项未解决 `
      }
      tableAlertOptionRender={(props) => {
        return (
          <Space>
            <Button type='link'>操作</Button>
            <Button type='link' onClick={props.onCleanSelected}>
              清空
            </Button>
          </Space>
        );
      }}
      search={{
        labelWidth: 'auto',
      }}
      form={{
        // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
        syncToUrl: (values, type) => {
          if (type === 'get') {
            return {
              ...values,
              created_at: [values.startTime, values.endTime],
            };
          }
          return values;
        },
      }}
      pagination={{ pageSize: 5 }}
      dateFormatter='string'
      headerTitle='高级表格'
      toolBarRender={(_, { selectedRowKeys }) => [
        <Detail
          isCreate
          title='新建情况'
          createBtn={
            <Button key='button' icon={<PlusOutlined />} type='primary'>
              新建
            </Button>
          }
        />,
        selectedRowKeys && selectedRowKeys.length ? (
          <Button
            onClick={() => {
              window.alert(selectedRowKeys.join('-'));
            }}
          >
            批量删除
          </Button>
        ) : undefined,
        <Dropdown key='menu' overlay={menu}>
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
      ]}
    />
  );
};
